<template>
  <view class="new_main">
    <scroll-view
      style="height: 100vh; background-color: #ffffff"
      class="scroll_content"
      scroll-y="true"
      :refresher-triggered="isRefreshing"
      refresher-background="#F6F7FB"
      @scrolltolower="loadMore"
    >
      <view class="header">
        <!-- 顶部背景图 -->
        <image
          class="img100"
          src="/static/img/my/homeCenter/myHome_bj.png"
          mode="widthFix"
        />
        <u-icon
          class="arrow_left"
          name="arrow-left"
          size="24"
          color="#fff"
          @click="goBack()"
        ></u-icon>
      </view>
      <view class="userInfoTa">
        <view class="info">
          <view class="avatar">
            <image
              :src="taUserInfo.avatar"
              class="img100"
              mode="aspectFill"
            ></image>
          </view>

          <view
            class="edit"
            :class="{ cancel: is_focus == 1 }"
            @click.stop="gzFun"
          >
            {{ is_focus == 1 ? "取消关注" : "+关注" }}
          </view>
        </view>
        <view class="title">
          <view class="name"> {{ taUserInfo.nickname }}</view>
          <view class="user_status">
            <view class="status_flag" v-if="majorIsOnline == 1">
              <view class="st_dot1"></view>
              <view class="st_text"> 在线 </view>
            </view>
            <view class="status_flag" v-if="majorIsOnline == 2">
              <view class="st_dot2"></view>
              <view class="st_text"> 忙碌 </view>
            </view>
            <view class="status_flag" v-if="majorIsOnline == 0">
              <view class="st_dot3"></view>
              <view class="st_text"> 离线 </view>
            </view>
          </view>
        </view>
        <!-- 官方认证 -->
        <view class="approve">
          <view class="approve_img">
            <image
              src="/static/img/my/homeCenter/V_1.png"
              mode="widthFix"
              class="img100"
            ></image>
          </view>
          <view class="approve_tag">
            {{ majorTypes.replace(/,/g, "、") }}
          </view>
        </view>
        <!-- 擅长 -->
        <view class="good_tags" v-if="majorDirectionList.length > 0">
          <view
            class="tag_item"
            v-for="(item, index) in majorDirectionList"
            :key="index"
          >
            {{ item }}
          </view>
        </view>
      </view>
      <!-- 个人简介 -->
      <view class="introduce">
        <view class="text"> {{ taUserInfo.bio }}</view>
      </view>
      <!-- 赞,粉丝,关注 -->
      <view class="like_info">
        <view class="like_item">
          <text class="item_txt">{{ taUserInfo.likes }}</text
          >赞
        </view>

        <view class="like_item">
          <text class="item_txt">{{ taUserInfo.fans }}</text
          >粉丝
        </view>
        <view class="like_item">
          <text class="item_txt">{{ taUserInfo.focus }}</text
          >关注
        </view>
      </view>

      <view class="askContent">
        <view class="ask_nav">
          <view
            class="nav_item"
            v-for="(item, index) in navList"
            :key="index"
            @click="navClick(index)"
          >
            <text class="nav_txt" >{{ item.name }}</text>
            <text class="nav_txt" v-if="index == 1"> ({{ allCount }}) </text>
            <view class="tableLine" v-show="currentPage == index"></view>
          </view>
        </view>
        <view class="answer_content" v-show="currentPage == 0">
          <template v-if="answerList.length > 0">
            <view
              class="answerList"
              v-for="(item, index) in answerList"
              :key="index"
              @click="goInfo(item)"
            >
              <view class="t_info">
                <image
                  class="t_avatar"
                  :src="item.avatar"
                  mode="aspectFill"
                ></image>
                <view>
                  <view class="t_name">{{ item.name }}</view>
                  <view class="t_time">{{ item.time }}</view>
                </view>
              </view>
              <view class="as_content ellipsis2">
                {{ item.content }}
              </view>
              <view class="reply_content">
                <view class="tips"> TA的回答 </view>
                <view class="reply_details" v-if="item.answer">
                  <view v-if="item.answer.extendedData.type == 1">
                    {{ item.answer.message }}
                  </view>
                  <view v-if="item.answer.extendedData.type == 11">
                    [ 图片 ]
                  </view>
                  <view v-if="item.answer.extendedData.type == 111">
                    [ 表情 ]
                  </view>
                </view>
              </view>
            </view>
            <uni-load-more :status="listStatus"></uni-load-more>
          </template>
          <template v-else>
            <view>
              <u-empty
                text="暂无回答"
                icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
              ></u-empty>
            </view>
          </template>
        </view>
        <view class="evaluate_content" v-show="currentPage == 1">
          <template v-if="evaluateList.length > 0">
            <view
              class="evaluate_item"
              v-for="(item, index) in evaluateList"
              :key="index"
            >
              <image
                class="left_avatar"
                :src="item.user_avatar"
                mode="aspectFill"
              ></image>
              <view class="right_info">
                <view class="top_title">
                  <view class="top_name">
                    {{ item.nickname }}
                  </view>
                  <u-rate
                    :value="item.star"
                    :readonly="true"
                    color="#fff"
                  ></u-rate>
                </view>
                <view class="content">
                  {{ item.evaluate }}
                </view>
                <view class="date">
                  {{ item.createtime_text }}
                </view>
              </view>
            </view>
            <uni-load-more :status="listStatus"></uni-load-more>
          </template>
          <template v-else>
            <u-empty
              text="暂无评论"
              icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
            ></u-empty>
          </template>
        </view>
        <view class="ask_btn" @click="goAsk()"> 向TA提问 </view>
      </view>
    </scroll-view>

    <!-- 专家是否在线忙碌，弹出确认框继续提问弹框 -->
    <u-modal
      :show="showModal"
      :content="content"
      :showCancelButton="true"
      @cancel="showModal = false"
      @confirm="onConfirm()"
      :confirmText="'继续提问'"
    ></u-modal>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/my/homeCenter/taTeacherHome"
></script>

<style lang="scss" scoped>
.arrow_left {
  position: absolute;
  top: var(--status-bar-height);
  left: 32rpx;
  z-index: 999999;
}
.new_main {
  background-color: #ffffff !important;
}

.answer_content {
  min-height: 600rpx;
}

.evaluate_content {
  min-height: 600rpx;
}

.cFF8F1F {
  color: #ff8f1f;
}

.c0CA649 {
  color: #0ca649;
}

.cCCC {
  color: #ccc;
}

.cFFBDBD {
  color: #ffbdbd;
}

.topTitle {
  top: 0;
  position: absolute;
}

.topImage {
  width: 100%;
}

.userInfoTa {
  position: absolute;
  top: 300rpx;
  border-radius: 25rpx 25rpx 0 0;
  padding: 0 30rpx;
  width: 100%;
  background-color: #fff;
  .info {
    position: relative;
    display: flex;
    justify-content: space-between;
  }
}

.avatar {
  margin-top: -100rpx;
  border: 10rpx solid #fff;
  border-radius: 100rpx;
  height: 200rpx;
  width: 200rpx;
  overflow: hidden;
}

.edit {
  margin-top: 30rpx;
  text-align: center;
  width: 148rpx;
  height: 62rpx;
  line-height: 62rpx;
  background: #fb840e;
  border-radius: 82rpx;
  color: #fff;
  font-size: 28rpx;
}

.cancel {
  text-align: center;
  height: 62rpx;
  line-height: 62rpx;
  background: #f3f3f3;
  border-radius: 82rpx;
  color: #a9a9a9;
  font-size: 28rpx;
}

.title {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  .name {
    margin-right: 20rpx;
    font-weight: 700;
    font-size: 50rpx;
    color: #333333;
  }

  .user_status {
    display: flex;
    height: 100rpx;

    .status_flag {
      display: flex;
      align-items: center;
    }
    .st_dot1 {
      width: 12rpx;
      height: 12rpx;
      background-color: #36ce50;
      border-radius: 50%;
      margin-right: 10rpx;
    }

    .st_dot2 {
      width: 12rpx;
      height: 12rpx;
      background-color: #ff6161;
      border-radius: 50%;
      margin-right: 10rpx;
    }

    .st_dot3 {
      width: 12rpx;
      height: 12rpx;
      background-color: #999999;
      border-radius: 50%;
      margin-right: 10rpx;
    }
  }
}

.approve {
  display: flex;
  align-items: center;
  margin-top: 30rpx;

  .approve_img {
    margin-right: 10rpx;
    vertical-align: middle;
    width: 32rpx;
    height: 32rpx;
  }

  .approve_tag {
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
  }
}

.good_tags {
  display: flex;
  margin-top: 20rpx;
  .tag_item {
    margin-right: 10rpx;
    padding: 0 10rpx;
    min-width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: #f6f6f6;
    border-radius: 4rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.introduce {
  position: relative;
  .text {
    font-size: 25rpx;
    color: #999999;
  }
}

.like_info {
  display: flex;
  padding: 0 40rpx;
  width: 100%;
  height: 80rpx;
  background-color: #ffffff;
  .like_item {
    font-size: 26rpx;
    color: #999999;
    margin-right: 100rpx;
    .item_txt {
      font-size: 40rpx;
      margin-right: 10rpx;
      color: #6d91ff;
    }
  }
}

.askContent {
  margin-top: 20rpx;
  padding: 30rpx;
  padding-bottom: 100rpx;
  background-color: #fff;

  .ask_nav {
    height: 87rpx;
    border-bottom: 1rpx solid #eaeaea;
    display: flex;

    .nav_item {
      font-size: 36rpx;
      color: #333333;
      font-weight: bold;
      margin-right: 100rpx;
      .nav_txt {
        color: rgb(102, 102, 102);
      }
    }

    .tableLine {
      position: relative;
      left: 50%;
      top: 30rpx;
      transform: translate(-50%, 0);
      width: 66rpx;
      height: 6rpx;
      background: #4291ff;
      border-radius: 516rpx;
    }
  }

  .answer_content {
    .answerList {
      margin-top: 60rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #d8d8d8;

      &:last-child {
        border-bottom: none;
      }

      .t_info {
        display: flex;
        .t_avatar {
          margin-right: 10rpx;
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }

        .t_name {
          font-size: 28rpx;
        }

        .t_time {
          font-size: 24rpx;
          color: #999999;
          margin-top: 10rpx;
        }
      }

      .as_content {
        width: 100%;
        font-size: 30rpx;
        font-weight: bold;
        margin-top: 30rpx;
      }
      .reply_content {
        margin-top: 15rpx;
        padding: 24rpx 35rpx;
        width: 100%;
        background: #f8f8f8;
        border-radius: 10px;
        font-size: 26rpx;
        color: #999999;

        .tips {
          font-size: 22rpx;
          color: #6d91ff;
        }

        .reply_details {
          margin-top: 10rpx;
        }
      }
    }
  }
}

.text {
  margin-top: 314rpx;
  width: 100%;
  padding: 20rpx 40rpx;
  height: auto;
  font-size: 25rpx;
  color: #999999;
  background-color: #fff;
}

.evaluate_content {
  .evaluate_item {
    padding: 40rpx 0;
    width: 100%;
    min-height: 268rpx;
    display: flex;

    .left_avatar {
      width: 104rpx;
      height: 104rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .right_info {
      border-bottom: 1rpx solid #eaeaea;
      .top_title {
        display: flex;
        justify-content: space-between;
        .top_name {
          font-size: 26rpx;
          color: #666666;
        }
      }
      .content {
        width: 544rpx;
        font-size: 32rpx;
        margin-top: 10rpx;
      }

      .date {
        margin-top: 14rpx;
        font-size: 24rpx;
        color: #b8b8b8;
      }
    }
  }
}

.ask_btn {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 680rpx;
  height: 87rpx;
  background: #1c87f3;
  border-radius: 44px;
  color: #ffffff;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
